<template>
  <div>
    <h2>用户管理</h2>
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>角色</th>
        <th>创建时间</th>
        <th>状态</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.phone }}</td>
        <td>{{ user.role }}</td>
        <td>{{ user.createdAt }}</td>
        <td>
          <span v-if="user.status === 0">正常</span>
          <span v-if="user.status === 1">禁用</span>
          <span v-if="user.status === 2">未激活</span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import http from '../axios/index';

const users = ref([]);

const fetchUsers = async () => {
  try {
    const response = await http.get('/users');
    console.log('Response from /users:', response); // 打印响应用于调试

    // 修复点：根据实际响应结构赋值
    if (Array.isArray(response)) {
      users.value = response;
    } else if (response && Array.isArray(response.list)) {
      // 如果后端确实返回 { list: [...] } 结构，则保留此逻辑
      users.value = response.list;
    } else {
      console.warn('无法解析用户数据:', response);
      users.value = [];
    }
  } catch (error) {
    console.error('获取用户列表失败:', error);
    users.value = [];
  }
};

onMounted(() => {
  fetchUsers();
});
</script>


<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>